{% schema %}
{
  "name": "Tailored Vision",
  "settings": [
    {
      "type": "text",
      "id": "tailored_title",
      "label": "Title",
      "default": "Tailored Vision"
    },
    {
      "type": "text",
      "id": "tailored_desc",
      "label": "Description",
      "default": "Seamless built-in correction from 0.00D to -6.00D"
    },
    {
      "type": "url",
      "id": "img_device_src",
      "label": "Device Image Source",
    },
    {
      "type": "url",
      "id": "img_device_pc_src",
      "label": "Device Image Source",
    },
    {
      "type": "url",
      "id": "img_leno_src",
      "label": "Leno Image Source",
    },
    {
      "type": "text",
      "id": "tailored_text",
      "label": "Additional Text",
      "default": "Easily swap insert lenses with precision prescription—perfect for sharing with friends and family"
    }
  ]
}
{% endschema %}

{%- style -%}
  .tailored-{{ section.id }} {
    background: black;
    overflow: hidden;
    padding-bottom: 116px;
  }
    .tailored-title-{{ section.id }} {
      font-family: HarmonyOS Sans;
      font-size: 36px;
      font-weight: bold;
      line-height: 100%;
      text-align: left;
      letter-spacing: -1.44px;
      color: #FFFFFF;
    }
    .tailored-desc-{{ section.id }} {
      width: 262px;
      font-family: HarmonyOS Sans;
      font-size: 20px;
      font-weight: normal;
      line-height: 120%;
      letter-spacing: -0.8px;
      text-align: left;
      font-variation-settings: "opsz" auto;
      color: #FFFFFF;
    }
  .tailored-img-600-{{ section.id }} {
    width: 295px;
    height: 82px;
     position: relative;
    left:-1.5rem;
  }
  .tailored-img-device-{{ section.id }} {
   position: relative;
    top: -32px;
    left: -1.5rem;
    width: 100%; 
        transform: rotate(-7.41151deg);
  }
  .tailored-img-device-img-{{ section.id }} {
    height: 380px; 
  }
  .tailored-img-box {
    position: relative; 
    padding-top: 50px;
  }
  .tailored-text-{{ section.id }} {
    flex: 1;
    font-family: HarmonyOS Sans SC;
    font-size: 14px;
    font-weight: normal;
    line-height: 120%;
    letter-spacing: 0px;
    font-variation-settings: "opsz" auto;
    color: #86868B;
  }
  .tailored-img-leno-{{ section.id }} {
    width: 78px;
    height:47px;
  }
  .tailored-leno-{{ section.id }} {
    display: flex;
  }
  .text600 {
    
      filter: blur(100px);
  }
  .text600-div {
    width: 78.666666%;
      padding-bottom: 27.77%;
  }
  .text600 .text {
      background: linear-gradient(to bottom, #FAFAFA, #627599);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      font-size: 96px;
      font-weight: bold;
    text-align: center;
    white-space: nowrap;
  }
{%- endstyle -%}

{% assign settings = section.settings %}
<div class="tailored-{{ section.id }} position-relative  z-1">
  <div class="container">
    <div class="tailored-title-{{ section.id }} mb-4 anim">
      {{ settings.tailored_title }}
    </div>
    <div class="tailored-desc-{{ section.id }} anim">
      {{ settings.tailored_desc }}
    </div>
    <div class="tailored-img-box row gy-0">
      <div class="text600 anim-filter col col-12 col-md-6">
        <div class="text600-div">
           <div class="position-absolute top-0 start-0 end-0 bottom-0 text">
          0-<span id="target-{{ section.id }}">0</span>°
        </div>
        </div>
        <div class="tailored-leno-{{ section.id }} d-lg-flex d-none mt-7" >
      <div class="me-4">
        <img
          class="tailored-img-leno-{{ section.id }}"
          src="{{ settings.img_leno_src }}"
        >
      </div>
      <div class="tailored-text-{{ section.id }}">
        {{ settings.tailored_text }}
      </div>
    </div>
      </div>
      <div class=" col col-12 col-md-6">
         <div class="tailored-img-device-{{ section.id }}">
         <img
              class="d-xl-none tailored-img-device-img-{{ section.id }}"
              src="{{ settings.img_device_src }}"
            >
          <img
              class="d-none d-xl-block tailored-img-device-img-{{ section.id }}"
              src="{{ settings.img_device_pc_src }}"
            >
      </div>
      </div>
     
    </div>
    <div class="tailored-leno-{{ section.id }}   d-lg-none d-flex">
      <div class="me-4">
        <img
          class="tailored-img-leno-{{ section.id }}"
          src="{{ settings.img_leno_src }}"
        >
      </div>
      <div class="tailored-text-{{ section.id }}">
        {{ settings.tailored_text }}
      </div>
    </div>
  </div>
</div>

<script
  type="module"
>
  import { CountUp } from "{{ 'countUp.min.js' | asset_url }}";
  
  document.addEventListener("DOMContentLoaded", function () {
    var countUp = new CountUp("target-{{ section.id }}", 600, {
      onCompleteCallback: () => {
            flag  = 2;
          },
          onStartCallback: () => {
            flag  = 1;
          }
    });
    const targetDiv = document.getElementById('target-{{ section.id }}');
    let flag = 0;
    function addClassWhenInCenter() {
          const viewportHeight = window.innerHeight;
          const targetRect = targetDiv.getBoundingClientRect();
          const targetTop = targetRect.top;
          const targetBottom = targetRect.bottom;
      
          if (targetTop < viewportHeight && targetBottom > 0) {
            flag == 0 && countUp.start();
          } else if (targetTop > viewportHeight || targetBottom < 0) {
            flag == 2 && countUp.reset();
              flag = 0;
          }
    }
  
    window.addEventListener('scroll', addClassWhenInCenter);
    addClassWhenInCenter();
    
    const anim = [
      ".anim", ".anim-filter", ".anim-rotate15"
    ]
    const contents = [];
    anim.forEach(item => {
      const arr = document.querySelectorAll(item);
      arr.forEach(a => contents.push(a))
    })
    const anim_remove = [".anim-remove"];
    console.log("anim_remove", anim_remove)
    const removes = [];
    anim_remove.forEach(item => {
      const arr = document.querySelectorAll(item);
      arr.forEach(a => removes.push(a))
    })

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animated');
 
        } else {
          entry.target.classList.remove('animated');
 
        }
      });
    }, {
    threshold: 0
    });

    const observer_remove = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.remove('anim-remove');
        } else {
          entry.target.classList.add('anim-remove');
        }
      });
    }, {
    threshold: 0
    });

    contents.forEach(content => observer.observe(content)); // 观察每一个 元素
    removes.forEach(content => observer_remove.observe(content));

    // 滑动旋转
          const target = document.querySelector(".tailored-img-device-{{ section.id }}");
      window.addEventListener("scroll", () => {
        const targetRect = target.getBoundingClientRect();
        const viewportHeight = window.innerHeight;
        const targetCenterY = targetRect.top + targetRect.height / 2;
        const percentageInViewport = targetCenterY / viewportHeight;
        if (percentageInViewport >= 0.2 && percentageInViewport <= 0.9) {
          const rotationAngle = ((percentageInViewport - 0.3) / 0.4) * 5;
          target.style.transform = `rotate(-${rotationAngle}deg)`;
        }
      });
  });
</script>

<style>
  @media screen and (min-width: 992px) {
      .text600 .text {
        font-size: 6rem;
      }
    .tailored-leno-{{ section.id }} {
        max-width: 400px;
     }
    .tailored-title-{{section.id }} {
        margin-top: 200px;
      }
    .text600-div {
      padding-bottom: 0;
    }
    .text600-div .text {
      position: static!important;
    }
    }
    @media screen and  (min-width: 1280px) {
      .text600 .text {
        font-size: 7rem;
        line-height: 1.2;
      }
      .tailored-title-{{section.id }} {
        font-size: 70px;
        margin-top: 200px;
      }
      .tailored-desc-{{section.id }} {
        font-size: 32px;
        margin-top: 32px;
        width: 430px;
      }
      .text600 .text {
        text-align: left;
      }
      .tailored-img-device-{{ section.id }} {
        padding-bottom: 0;
        top: -20%;
      }
      .tailored-img-device-img-{{ section.id }} {
        width: 100%;
                height: auto!important;
        position: relative;
      }
      .tailored-{{ section.id }} {
        padding-bottom: 0;
      }
    }
</style>
